<template>
  <div class="wh-full flex flex-col justify-around text-14px">
    <div
      v-for="(item, index) in props.comData"
      :key="index"
      class="flex flex-col"
    >
      <div class="mb-8px ml-3px">
        <span class="color-#333">{{ item.label }}</span>
      </div>
      <el-progress class="w-full" :percentage="item.percent" :stroke-width="16" >
        <div class="w-80px text-right progress-text text-14px font-bold color-#000">{{ item.value }}</div>
      </el-progress>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  comData: {
    type: Array,
    default: () => {
      return [
        { label: '29岁及以下', value: 10, percent: 15 },
        { label: '30-39岁', value: 10, percent: 10 },
        { label: '40及49岁', value: 10, percent: 33 },
        { label: '50岁及以上', value: 10, percent: 22 },
        { label: '100岁及以上', value: 10, percent: 22 }
      ]
    }
  }
})
</script>
<style lang="scss" scoped></style>
